<template>
    <div class="totalStyle"  >
        <div class="leftTopArea">

        </div>
        <el-row style="width: 100%;" >
            <el-col :span="24" >
                <el-carousel height="400px" direction="vertical" :autoplay="true" :interval="2000">
                    <el-carousel-item v-for="advertisement in advertisementData" :key="advertisement.id">
                        <img v-if="advertisement.pictureUrl"
                             :src="advertisement.pictureUrl"
                             class="avatar"
                             :title="advertisement.title"

                             style="cursor: pointer"
                             @click="toPageUrl(advertisement.toPageUrl)"
                             width="300px"
                             height="100%">
                        <i v-else class="el-icon-loading"></i>
                    </el-carousel-item>
                </el-carousel>
            </el-col>

        </el-row>






    </div>
</template>

<script>
    export default {
        name: "FrontFrameLeftArea",
        data(){
            return{
                advertisementData:{},   //所有的广告信息

            }
        },
        created() {
            this.queryAllAdvertisements();

        },
        methods:{
            //跳转到广告界面
            toPageUrl(toPageUrl){
                window.location.href=toPageUrl;
            },
            //查询所有审核通过的广告
            queryAllAdvertisements() {
                this.request.get("/index/advertisement/queryAllAdvertisements",{
                    params:{
                        auditStatue: true,
                        queryTitleLike: this.queryTitleLike,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.advertisementData=res.data.advertisements;
                        // this.totalAdvertisementsNum=res.data.totalAdvertisementsNum;
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .totalStyle{
        height: 100%;
        width: 310px;
        position: fixed;
        /*display: flex;*/
        /*align-items: center;*/
        /*background: #8c939d;*/
    }

    .leftTopArea{
        height: 200px;
        width: 100%;
    }







</style>